<template>
  <el-tabs v-model="activeName" @tab-click="clickTab">
    <el-tab-pane label="主梁" name="1">
      <div class="container">
        <div class="row">
          <monitoring-zhuliang
            :indexOfValue="selectPointA"
            key="0"
            height="400px"
            width="1600px"
          ></monitoring-zhuliang>
        </div>
        <div class="row">
          <div class="img">
            <div class="point" :style="pointAPosition"></div>
            <img
              src="../../../../../assets/image/zl.jpg"
              alt="/"
              style="width: 90%"
            />
          </div>
          <div class="table">
            <el-table
              :data="tableDataA"
              fit
            >
              <el-table-column width="80">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.selected"
                    @change="selectPointAChange(scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="Id" label="序号" width="150">
              </el-table-column>
              <el-table-column prop="t001" label="监测位置" width="150">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="减速机" name="2">
      <div class="container">
        <div class="row">
          <monitoring-jiansuji
            :indexOfValue="selectPointB"
            key="0"
            height="400px"
            width="1600px"
          ></monitoring-jiansuji>
        </div>
        <div class="row">
          <div class="img">
            <div class="point" :style="pointBPosition"></div>
            <img
              src="../../../../../assets/image/jsj.png"
              alt="/"
              style="width: 90%"
            />
          </div>
          <div class="table">
            <el-table
              :data="tableDataB"
              fit
            >
              <el-table-column width="80">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.selected"
                    @change="selectPointBChange(scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="Id" label="序号" width="150">
              </el-table-column>
              <el-table-column prop="t001" label="监测位置" width="150">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import MonitoringZhuliang from "./monitoring/monitoring-zhuliang.vue";
import MonitoringJiansuji from "./monitoring/monitoring-jiansuji.vue";
export default {
  components: { MonitoringZhuliang, MonitoringJiansuji },
  data() {
    return {
      activeName: "1",
      selectPointA: 1,
      selectPointB: 1,
      pointAPosition: "",
      pointBPosition: "",
      tableDataA: [
        // 主梁测点数据
        {
          Id: 1,
          t001: "副主梁与端梁连接上盖板（西）",
          selected: true,
        },
        {
          Id: 2,
          t001: "副主梁连接上盖板（西）",
          selected: false,
        },
        {
          Id: 3,
          t001: "主梁端部变截面连接焊缝",
          selected: false,
        },
        {
          Id: 4,
          t001: "北侧主梁下盖板1/4 跨",
          selected: false,
        },
        {
          Id: 5,
          t001: "北侧主梁下盖板1/2 跨",
          selected: false,
        },
        {
          Id: 6,
          t001: "北侧主梁下盖板1/4 跨",
          selected: false,
        },
        {
          Id: 7,
          t001: "副主梁连接上盖板（东)",
          selected: false,
        },
        {
          Id: 8,
          t001: "副主梁与端梁连接上盖板（东）",
          selected: false,
        },
        {
          Id: 9,
          t001: "北侧主梁主腹板1/4 跨（西）",
          selected: false,
        },
        {
          Id: 10,
          t001: "北侧主梁主腹板1/2 跨",
          selected: false,
        },
        {
          Id: 11,
          t001: "北侧主梁主腹板1/4 跨（东）",
          selected: false,
        },
      ],
      tableDataB: [
        // 减速机测点数据
        {
          Id: 1,
          t001: "高速轴轴承座",
          selected: true,
        },
        {
          Id: 2,
          t001: "高速轴轴承座",
          selected: false,
        },
        {
          Id: 3,
          t001: "低速轴轴承座",
          selected: false,
        },
        {
          Id: 4,
          t001: "低速轴轴承座",
          selected: false,
        },
        {
          Id: 5,
          t001: "高速轴轴承座",
          selected: false,
        },
        {
          Id: 6,
          t001: "高速轴轴承座",
          selected: false,
        },
        {
          Id: 7,
          t001: "低速轴轴承座",
          selected: false,
        },
        {
          Id: 8,
          t001: "低速轴轴承座",
          selected: false,
        },
      ],
      positionA: {
        // 主梁指示点位置
        1: "top:5%;left:46%",
        2: "top:9%;left:54%",
        3: "top:12%;left:40%",
        4: "top:19%;left:34%",
        5: "top:25%;left:27%",
        6: "top:29%;left:22%",
        7: "top:34%;left:16%",
        8: "top:36%;left:20%",
        9: "top:23%;left:23%",
        10: "top:18%;left:29%",
        11: "top:14%;left:35%",
      },
      positionB: {
        // 减速机指示点位置
        1: "top:8%;left:22%;",
        2: "top:9%;left:24%;",
        3: "top:9%;left:41%;",
        4: "top:17%;left:60%;",
        5: "top:34%;left:78%;",
        6: "top:38%;left:77%;",
        7: "top:35%;left:31%;",
        8: "top:44%;left:50%;",
      },
    };
  },
  created(){
    this.pointAPosition=this.positionA['1'];
    this.pointBPosition=this.positionB['1'];
  },
  methods: {
    clickTab(tab) {},
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    selectPointAChange(row) {
      console.log("选中了监测点：", row.Id, row.selected);
      if (row.selected == true) {
        // 遍历所有行，取消其他行的选中状态
        for (const item of this.tableDataA) {
          if (item.Id != row.Id) {
            item.selected = false;
          }
        }
        // 选中了当前行，进行一些操作
        this.selectPointA = +row.Id - 1;
        this.pointAPosition = this.positionA[row.Id + ""];
        // ... ...
      } else {
        // 取消选中当前行的操作无效化，同时有且会有一行被选中
        row.selected = true;
      }
    },
    selectPointBChange(row) {
      console.log("选中了监测点：", row.Id, row.selected);
      if (row.selected == true) {
        // 遍历所有行，取消其他行的选中状态
        for (const item of this.tableDataB) {
          if (item.Id != row.Id) {
            item.selected = false;
          }
        }
        // 选中了当前行，进行一些操作
        this.selectPointB = +row.Id - 1;
        this.pointBPosition = this.positionB[row.Id + ""];

        // ... ...
      } else {
        // 取消选中当前行的操作无效化，同时有且会有一行被选中
        row.selected = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
div.container {
  display: flex;
  flex-direction: column;
  div.row {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 10px;
    div.img {
      flex-grow: 1;
      position: relative;
      .point {
        position: absolute;
        background-color: #18af55;
        width: 15px;
        height: 15px;
        z-index: 6;
        border: 3px solid white;
        border-radius: 50%;
        // top: 45%;
        // left: 45%;
      }
    }
    div.table {
      flex-grow: 1;
      margin-right: 10px;
    }
  }
}
</style>